<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0" />
    <meta name="format-detection" content="telephone=no,email=no,date=no,address=no">
    <title>编辑头像</title>
    <link rel="stylesheet" href="../../css/aui.css" />

</head>

<body style="cursor: pointer;">
    <section class="aui-content">
        <div class="aui-card-list">
            <form id="myform" data-parsley-trigger="blur" role="form" action="#" method="POST" enctype="multipart/form-data">
                <div class="aui-card-list-content-padded aui-border-b aui-border-t">
                    <div class="aui-row aui-row-padded">
                        <div class="aui-col-xs-4"></div>
                        <div class="aui-col-xs-4 avatar_div">
                            <img src="../../image/head_portrait.png" style="width:6rem;height: 6rem;border-radius:50%;" id="edit_img" />
                            <!--<input  id="avatar" type="file" accept="image/*" multiple="multiple" name="avatar" style="width: 6rem;height: 6rem;border-radius:50%;position: relative;outline: medium none;top: -6rem;filter: alpha(opacity=0);-moz-opacity: 0;opacity: 0;">-->
                        </div>
                        <div class="aui-col-xs-4">
                            <input id="avatar" type="file" accept="image/*" multiple="multiple" name="avatar" style="width: 6rem;height: 6rem;position: relative;outline: medium none;filter: alpha(opacity=0);-moz-opacity: 0;opacity: 0;">
                        </div>
                    </div>
                </div>
                <div class="aui-card-list-footer">
                    <div class="aui-col-xs-3"></div>
                    <div class="aui-btn aui-btn-info" id="save" style="background: #3cb0d6 !important;">保存头像</div>
                    <div class="aui-col-xs-3"></div>
                </div>
            </form>
        </div>
    </section>
</body>

</html>
<script type="text/javascript" src="../../script/aui/api.js"></script>
<script type="text/javascript" src="../../script/extend/jquery-3.3.1.min.js"></script>
<script type="text/javascript" src="../../script/config.js"></script>
<script type="text/javascript" src="../../script/common.js"></script>
<script type="text/javascript">
    apiready = function() {
        api.parseTapmode();
        var avatar = localStorage.getItem('avatar');
        $('#edit_img').attr('src', avatar);

        //获取头像div的宽度
        var img_width = $('.avatar_div').outerWidth(true);
        $("#avatar").css("right", img_width + 'px');
        /**
         * 单击图片任意区域上传头像
         */
        $(document).on('change', '#avatar', function() {
            var file = $(this)[0].files[0];
            // 验证文件类型
            var mime = file.type;
            var allow_type = ['image/jpeg', 'image/gif', 'image/png', 'image/bmp'];
            if (allow_type.indexOf(mime) == -1) {
                alert("请确保文件为图像类型");
                return false;
            }

            // 图片预览
            var reader = new FileReader();
            reader.readAsDataURL(file);
            reader.onload = function() {
                $('#edit_img').attr('src', reader.result);
            }
        });
    }

    //上传操作
    $('#save').click(function() {
        var file = $('#avatar')[0].files[0];
        if (file != undefined) {
          var img = new Image();
          img.src = $('#edit_img').attr('src');
          var reader = new FileReader();
          reader.readAsDataURL(file);
          reader.onload = function() {
              //压缩图片
              var square = 500;
              var canvas = document.createElement('canvas');
              canvas.width = square;
              canvas.height = square;
              var context = canvas.getContext('2d');
              context.clearRect(0, 0, square, square);
              var imageWidth;
              var imageHeight;
              var offsetX = 0;
              var offsetY = 0;
              //获取图片的宽高
              if (img.width > img.height) {
                  imageWidth = Math.round(square * img.width / img.height);
                  imageHeight = square;
                  offsetX = -Math.round((imageWidth - square) / 2);
              } else {
                  imageHeight = Math.round(square * img.height / img.width);
                  imageWidth = square;
                  offsetY = -Math.round((imageHeight - square) / 2);
              }
              context.drawImage(img, offsetX, offsetY, imageWidth, imageHeight);
              var imgData = canvas.toDataURL('image/jpeg');
              var param = {};
              param.url = Config.common.editAvatar;
              param.data = {
                  imgData: imgData
              };
              ajax(param, function(data) {
                  if (data.code == 1) {
                      api.sendEvent({
                          name: 'headerTop',
                          extra: {
                              is_image: 1
                          }
                      });
                      openWin('details', './details_win.html');
                  }
              })
          }
        }
    });
</script>
